<template>
<div class="wrap">
  <div v-show="!pageShow1&&!pageShow2" class="certificate-edit">
    <div class="upload-wrapper p40">
      <div class="title">头像</div>
      <div class="upload-sec">
        <img src="../../images/addImg.png" alt="" @click="handleClickUpload('avatar')">
        <img v-if="configParam.images.length" :src="configParam.images[0].fileUrl" alt="">
        <img v-if="!configParam.images.length" src="../../images/demo.png" alt="">
      </div>
      <div style="font-size: .24rem;color: #999">(提交后再次修改头像需要重新认证，请按照示例上传)</div>
    </div>

    <div class="person-info-edit p40">
      <div class="real-name">
        <div class="title">真实姓名</div>
        <div class="input-wrap1"> 
          <input type="text" maxlength="10" placeholder="输入真实姓名" v-model="configParam.trueName">
        </div>
        <div style="font-size: .24rem;color: #999;margin-top: .2rem">(提交后再次修改姓名需要重新认证，请认真填写)</div>
        <group>
          <selector placeholder=""  v-model="configParam.sex" title="性别" :options="sexList" @on-change="handleChangeSex"></selector>
        </group>
        <group>
          <selector placeholder="" v-model="configParam.duty" title="认证身份" :options="identifyList" @on-change="handleChangeIdentify"></selector>
        </group>
      </div>
    </div>

    <div class="brief p40">
        <div class="title">简介</div>
        <div class="area1">
          <textarea type="text"  v-model="configParam.introduction"
                    placeholder="XXX副主任医师，毕业于XXX学院，博士学位，师承名老中医师XXX。现就职于XXX医院（1000字内）"
                    maxlength="1000"></textarea>
        </div>

      <div class="title">擅长</div>
      <div class="area2">
          <textarea type="text"  v-model="configParam.skill"
                    placeholder="擅长治疗月经失调、闭经、痛经等妇科疾病（1000字内）"
                    maxlength="1000"></textarea>
      </div>
    </div>
    <div class="btn-wrap">
      <div class="btn-next" @click="linkToNext">下一步</div>
    </div>
  </div>  
  <div v-show="pageShow1" class="person-edit">
    <div class="person-info-select">
      <group>
        <x-address title="地区" raw-value v-model="addressValue" :list="addressData" placeholder="请选择地址"></x-address>
        <x-input title="医疗机构" v-model="configParam.company" placeholder="请填写您所在的医疗机构"></x-input>
        <cell title="科室"  :value="sectionValue" is-link @click.native="handleClickSection"></cell>
        <selector title="职称" v-model="configParam.title" :options="positionList" placeholder="请选择您的职称"></selector>
      </group>
    </div>
    <div class="fixed-section-modal p40" v-show="showSection">
      <div>选择您所在科室或最擅长科室（选填）</div>
      <ul class="section-list flex-box-container">
        <li :class="{active: sectionSelectedKey == item.key}" v-for="(item, index) in sectionList" :key="index" @click="handleClickSelectOffice(item.key)">{{item.value}}</li>
      </ul>
      <p class='btn-save' @click="handleClickSave">保存</p>
    </div>
    <div >
      <commonMask v-show="showSection"></commonMask>
    </div>

    <!--拍照section-->
    <div class="take-photo-section">
      <div class="item-section p40">
        <p class="title">请拍摄上传您的执业资格证照</p>
        <div>
          <img v-if="cert1" :src="cert1.fileUrl" alt="">
          <img v-if="!cert1" src="../../images/demo1.png" alt="">
        </div>
        <p @click="handleClickUpload('cert1')"  class="btns flex-cont">
          <img src="../../images/takePhoto.png" alt="">
          <span>拍摄姓名面</span>
        </p>
      </div>
      <div class="item-section p40">
        <p class="title">请拍摄上传您的执业资格证照</p>
        <div>
          <img v-if="cert2" :src="cert2.fileUrl" alt="">
          <img v-if="!cert2" src="../../images/demo2.png" alt="">
        </div>
        <p @click="handleClickUpload('cert2')"  class="btns flex-cont">
          <img src="../../images/takePhoto.png" alt="">
          <span>拍摄印章面</span>
        </p>
      </div>
      <div class="item-section p40">
        <p class="title">请拍摄上传您的执业资格证照</p>
        <div>
          <img class="cert3" v-if="cert3" :src="cert3.fileUrl" alt="">
          <img class="cert3"v-if="!cert3" src="../../images/demo3.png" alt="">
        </div>
        <p @click="handleClickUpload('cert3')" class="btns flex-cont">
          <img src="../../images/takePhoto.png" alt="">
          <span>拍摄手持证件</span>
        </p>
      </div>
    </div>
    <div class="btn-wrap">
      <div  class="btn-back" @click="btnBack">上一步</div>
      <div  class="btn-check" @click="submitFicate">提交认证</div>
    </div>
  </div>
  <div v-show="pageShow2" class="organization-edit">
    <div class="person-info-select">
      <group>
        <x-address title="地区" v-model="addressValue" raw-value :list="addressData" placeholder="请选择地址"></x-address>
        <x-input  :max="10" title="联系人" v-model="configParam.contactPerson" placeholder="请填写联系人姓名"></x-input>
        <x-input  :max="20" type="number" title="联系方式" v-model="configParam.contactPhone" placeholder="请填写联系人电话"></x-input>
      </group>
    </div>

    <!--拍照section-->
    <div class="take-photo-section">
      <div class="item-section p40">
        <p class="title">请拍摄并上传您的工商管理执照</p>
        <div>
          <img class="cert3" v-if="cert1" :src="cert1.fileUrl" alt="">
          <img class="cert3" v-if="!cert1" src="../../images/demo4.png" alt="">
        </div>
        <p @click="handleClickUpload('cert1')" class="btns flex-cont">
          <img src="../../images/takePhoto.png" alt="">
          <span>拍摄工商执照</span>
        </p>
      </div>
      <div class="item-section p40">
        <p  class="title">请拍摄上传您的身份证正面</p>
        <div>
          <img v-if="cert2" :src="cert2.fileUrl" alt="">
          <img v-if="!cert2" src="../../images/demo5.png" alt="">
        </div>
        <p @click="handleClickUpload('cert2')" class="btns flex-cont">
          <img src="../../images/takePhoto.png" alt="">
          <span>拍摄身份证正面</span>
        </p>
      </div>
      <div class="item-section p40">
        <p class="title">请拍摄上传您的身份证反面</p>
        <div>
          <img v-if="cert3" :src="cert3.fileUrl" alt="">
          <img v-if="!cert3" src="../../images/demo6.png" alt="">
        </div>
        <p @click="handleClickUpload('cert3')" class="btns flex-cont">
          <img src="../../images/takePhoto.png" alt="">
          <span>拍摄身份证反面</span>
        </p>
      </div>
    </div>
    <div class="btn-wrap">
      <div  class="btn-back" @click="btnBack">上一步</div>
      <div  class="btn-check" @click="submitFicate">提交认证</div>
    </div>
  </div>
</div>
</template>

<script>
  let wx = require('weixin-js-sdk')
  import { Group, Cell, XAddress, ChinaAddressV4Data, XInput, Selector, Value2nameFilter as value2name } from 'vux';
  import commonMask from "../common/common-mask.vue";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    data () {
      return {
        sexList: [{key: "1", value: "男"}, {key: "0", value: "女"}],
        identifyList: [
          {key: "doctor", value:"医生"},{key: "nurse", value:"护士"},{key: "recover_physical_therapist", value:"康复理疗师"},
          {key: "health_manager", value:"健康管理师"},{key: "apothecary", value:"药师"},{key: "hospital ", value:"医院"},{key: "clinic", value:"诊所"},
          {key: "drugstore", value:"药店"},{key: "medical_instrument_supplie", value:"医疗器械供应商"},
        ],
        identify: "",
        brief: "",
        addressValue: [],
        organizationValue: "",
        addressData: ChinaAddressV4Data,
        sectionList: [
          {key: "fu", value: "妇科"},
          {key: "er", value: "儿科"},
          {key: "nei", value: "内科"},
          {key: "quan", value: "全科"},
          {key: "hu_xi", value: "呼吸科"},
          {key: "xin_nei", value: "心内科"},
          {key: "xiao_hua", value: "消化科"},
          {key: "gan_bing", value: "肝病科"},
          {key: "shen_zang", value: "肾脏科"},
          {key: "nei_fen_mi", value: "内分泌科"},
          {key: "shen_jing_nei", value: "神经内科"},
          {key: "feng_shi_mian_yi", value: "风湿免疫科"},
          {key: "zhong_liu", value: "肿瘤科"},
          {key: "xue_ye", value: "血液科"},
          {key: "pi_fu", value: "皮肤科"},
          {key: "ru_xian", value: "乳腺科"},
          {key: "nan", value: "男科"},
          {key: "teng_tong", value: "疼痛科"},
          {key: "lao_nian_bing", value: "老年病科"},
          {key: "zhou_wei_xue_guan", value: "周围血管科"},
          {key: "gu_shang", value: "骨伤科"},
          {key: "zhong_yi_yi_nan_bing", value: "中医疑难病科"},
          {key: "zhen_jiu", value: "针灸科"},
          {key: "zhi_wei_bing", value: "治未病科"},
          {key: "tui_na", value: "推拿科"},
          {key: "wu_guan", value: "五官科"},
          {key: "yan", value: "眼科"},
          {key: "er_bi_hou", value: "耳鼻喉科"},
          {key: "gang_chang", value: "肛肠科"},
          {key: "kou_qiang", value: "外科"},
          {key: "wai_shen_jing", value: "外神经科"},
          {key: "mi_niao_wai", value: "泌尿外科"},
          {key: "ji_zhen", value: "急诊科"},
          {key: "sheng_zhi", value: "生殖科"},
          {key: "kang_fu", value: "康复科"},
          {key: "mei_rong", value: "美容科"},
          {key: "xin_li", value: "心理科"},
          {key: "xin_shen_yi_xue", value: "心身医学科"},
          {key: "ti_jian_zhong_xin", value: "体检中心科"},
          {key: "yao_ji", value: "药剂科"},
          {key: "yi_wu", value: "医务科"},
          {key: "ying_yang", value: "营养科"},
        ],
        sectionValue: "请选择您的科室（选填）",
        sectionSelectedKey: "fu",
        showSection: false,
        positionList: [
          {key: "doctor_one", value: "主任医师"},
          {key: "doctor_two", value: "副主任医师"},
          {key: "doctor_three", value: "主治医师"},
          {key: "doctor_four", value: "医师"},
          {key: "doctor_five", value: "执业药师"},
          {key: "doctor_six", value: "药士"},
          {key: "doctor_seven", value: "药师"},
          {key: "doctor_eight", value: "主管药师"},
          {key: "doctor_nine", value: "助理医师"},
          {key: "doctor_eleven", value: "中医师"},
          {key: "doctor_tweleve", value: "康复理疗师"},
          {key: "doctor_thirteen", value: "健康管理师"},
          {key: "doctor_fourteen", value: "执业护士"}
        ],
        positionValue: "",
        pageShow1:false,
        pageShow2:false,
        configParam:{
          trueName:'',
          sex:'',
          duty:'',
          province:'',
          city:'',
          district:'',
          introduction:'',
          skill:'',
          company:'',
          department:'',
          title:'',
          contactPerson:'',
          contactPhone:'',
          type:'',
          images:[],
          certs:[],
        },
        cert1:'',
        cert2:'',
        cert3:''
      }
    },
    components: {
      Group, Cell, XAddress, XInput, Selector,
      commonMask
    },
    mounted(){

    },
    methods:{
      handleClickUpload(type) {
          wsService.default.getJsSDK( CONSTANT.URL.ACCOUNT.JSREQUIRE, {
            params: {}
            }).then(() => {
                wx.chooseImage({
                  count: 1, // 默认9
                  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                  success: (res)=> {
                    console.log(res,'上传图片')
                    wx.uploadImage({
                        localId: res.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: (item)=> {
                          var serverId = item.serverId; // 返回图片的服务器端ID
                          this.getImageInfo(serverId,type)
                       }
                      });
                    }
                });
        });
      },
      btnBack(){
        this.pageShow1 = false;
        this.pageShow2 = false;
      },
      submitFicate(){
        let arr = this.getName(this.addressValue).split(' '),
            typeArr = ['doctor','nurse','recover_physical_therapist','health_manager','apothecary']
        this.configParam.province = arr[0];
        this.configParam.city = arr[1];
        this.configParam.district = arr[2];
        this.configParam.type = typeArr.includes(this.configParam.duty)?'doctor':'company'
        this.configParam.certs = [this.cert1,this.cert2,this.cert3];
        let  url = CONSTANT.URL.DOCTOR.CHECKINFO;
        if(!this.configParam.province){
          this.$vux.toast.show({
              text:'地区不能为空',
              type:'cancel'
          })
          return;
       }
       if(!this.configParam.contactPerson&&this.pageShow2){
          this.$vux.toast.show({
              text:'联系人不能为空',
              type:'cancel'
          })
          return;
       }
       if(!this.configParam.contactPhone&&this.pageShow2){
          this.$vux.toast.show({
              text:'联系电话不能为空',
              type:'cancel'
          })
          return;
       }
       if(!this.configParam.company&&this.pageShow1){
          this.$vux.toast.show({
              text:'医疗机构不能为空',
              type:'cancel'
          })
          return;
       }
       if(!this.configParam.department&&this.pageShow1){
          this.$vux.toast.show({
              text:'科室不能为空',
              type:'cancel'
          })
          return;
       }
      if(!this.configParam.title&&this.pageShow1){
          this.$vux.toast.show({
              text:'职称不能为空',
              type:'cancel'
          })
          return;
       }
       if(!this.cert1||!this.cert2||!this.cert3){
         if(this.pageShow1){
          this.$vux.toast.show({
              text:'执业资格证照不能为空',
              type:'cancel'
          })
          return;
         }else{
           var text = this.cert1?'身份证照片不能为空':'工商管理执照不能为空'
          this.$vux.toast.show({
              text:text,
              type:'cancel'
          })
          return;
         }

       }
        common.requestAjax(url,this.configParam,{},(res)=>{
            if(res.status == 200){
                this.$vux.toast.show({
                    text: '提交认证成功'
                })
                setTimeout(()=>{
                  this.$router.replace('/me')
                },1000)
            }else{
              this.$vux.toast.show({
                    text:'保存失败',
                    type:'cancel'
                })
            }
        })  
      },
      getName (value) {
        return value2name(value, ChinaAddressV4Data)
      },
      getImageInfo(id,type){
        let  url = CONSTANT.URL.ACCOUNT.SAVEPHOTO,
            param = {
                mediaId:id
            }
        common.requestAjax(url,{},param,(res)=>{
            if(res.status == 200){
                let arr = [],strArr = [],obj = res.data.bussData;
                if(type == 'avatar'){
                  arr.push(obj);
                  this.configParam.images = arr;
                }else if(type == 'cert1'){
                  this.cert1 = obj;
                }else if(type == 'cert2'){
                  this.cert2 = obj;
                }else if(type == 'cert3'){
                  this.cert3 = obj;
                }
            }else{
              console.log(res,'error image info')
            }
        })     
      },
      handleChangeSex(val) {
        this.sex = val;
      },
      handleChangeIdentify(val) {
        this.identify = val
      },
      linkToNext() {
       if(!this.configParam.images.length){
          this.$vux.toast.show({
              text:'头像不能为空',
              type:'cancel'
          })
          return;
       }
       if(!this.configParam.trueName){
          this.$vux.toast.show({
              text:'真实姓名不能为空',
              type:'cancel'
          })
          return;
       }
       if(!this.configParam.sex){
          this.$vux.toast.show({
              text:'性别不能为空',
              type:'cancel'
          })
          return;
       }
       if(!this.configParam.duty){
          this.$vux.toast.show({
              text:'认证身份不能为空',
              type:'cancel'
          })
          return;
       }    
       if(!this.configParam.introduction){
          this.$vux.toast.show({
              text:'简介不能为空',
              type:'cancel'
          })
          return;
       }    
       if(!this.configParam.skill){
          this.$vux.toast.show({
              text:'擅长不能为空',
              type:'cancel'
          })
          return;
       }       
       let typeArr = ['doctor','nurse','recover_physical_therapist','health_manager','apothecary']
        if(typeArr.includes(this.configParam.duty)){
          this.pageShow1 = true
        }else{
          this.pageShow2 = true
        }
       
      },
      handleClickSection() {
        this.showSection = true
      },
      handleClickSelectOffice(key) {
        this.sectionSelectedKey = key
        console.log(key,'key')
        this.configParam.department = key
      },
      handleClickSave() {
        const {sectionSelectedKey, sectionList} = this;
        this.sectionValue = sectionList.filter( item => {
          return item.key == sectionSelectedKey;
        })[0].value;
        this.showSection = false;
      }
    }
  }
</script>

<style lang="scss">
  .certificate-edit {
    height: 100%;
    background-color: #f4f4f4;
    font-size: .34rem;
    .p40 {
      padding: .4rem .3rem .3rem .3rem;
    }
    .title {
      margin-bottom: .29rem;
    }
    textarea{
      &::-webkit-input-placeholder{
          color:#999;         
          font-size: .24rem;        
      } 
    }
    .upload-wrapper {
      background-color: #fff;
      margin-bottom: .2rem;

      .upload-sec {
        margin-bottom: .2rem;
        img {
          width: 1.4rem;
          height: 1.4rem;
          vertical-align: middle;
          &:first-child {
            margin-right: .23rem;
          }
        }
      }
    }

    .person-info-edit {
      margin-bottom: .2rem;
      background-color: #fff;
      .real-name {
        .input-wrap1{
          border-bottom: 1px solid #e1e1e1;
        }
        input {
          width: 100%;
          padding-bottom: .29rem;
          font-size: .3rem;
          border: none;
          &:focus {
            outline: 0;
          }
        }
        .weui-cells {
          margin-top: 0!important;
          &:before {
            content: "";
            border-top: none!important;
          }
        }
        .vux-selector.weui-cell_select-after {
          padding-left: 0!important;
        }
      }
    }

    .brief {
      background-color: #fff;
      .area1, .area2 {
        margin-bottom: .4rem;
        textarea {
          font-size: .3rem;
          border: none;
          width: 6.5rem;
          height: 2.4rem;
          padding: .2rem;
          background-color: #f4f4f4;
          &:focus {
            border: none;
            outline: 0;
          }
        }
      }
    }
    .btn-next {
      width: 6.9rem;
      height: .88rem;
      line-height: .88rem;
      text-align: center;
      background-color: #0063AE;
      color: #fff;
      font-size: .36rem;
      border-radius: .1rem;
      margin: 0 0 0 .3rem;
    }
  }
  .person-edit {
    font-size: .34rem;
    height: 100%;
    background-color: #f4f4f4;
    .p40 {
      padding: .4rem .3rem 0 .3rem;
    }
    .vux-x-input input {
      text-align: right;
    }

    .fixed-section-modal {
      position: fixed;
      background: #fff;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 3;
      overflow-y: scroll;
      height: 9rem;
      div {
        font-size: .32rem;
        margin-bottom: .3rem;
      }
      .section-list {
        margin-bottom: .88rem;
        li {
          padding: .17rem .24rem;
          border: 1px solid #e1e1e1;
          border-radius: .06rem;
          background-color: #fff;
          color: #666;
          font-size: .26rem;
          margin-right: .2rem;
          margin-bottom: .2rem;
        }
        .active {
          border: 2px solid #0060A9;
          color: #0060A9;
        }
      }
      p {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        height: .88rem;
        line-height: .88rem;
      text-align: center;
        background-color: #0063AE;
        color: #fff;
        font-size: .32rem;
      }
    }
    .take-photo-section {
      margin-top: .2rem;
      background: #fff;
      .item-section {
        &:last-child {
          padding-bottom: .6rem;
        }
        .title {
          font-size: .32rem;
          margin-bottom: .3rem;
          color: #111;
        }
        div {
          height: 4.8rem;
          text-align: center;
          background-color: #F4F4F4;
          img {
            width: 4.84rem;
            height: 4.04rem;
            margin-top: .275rem;
            vertical-align: middle;
            &.cert3{
              width: 3.26rem;
              height: 3.84rem;
              margin-top: .5rem;
            }
          }
        }

        .btns {
          height: .88rem;
          line-height: .88rem;
          border: 1px solid #999;
          text-align: center;
          border-radius: .1rem;
          margin-top: .27rem;
          img {
            width: .37rem;
            height: .31rem;
            vertical-align: middle;
            margin-right: .21rem;
          }
          span {
            font-size: .34rem;
            color: #0063AE;

          }
        }

      }
    }

    .btn-check {
      width: 6.9rem;
      margin-left: .3rem;
      height: .88rem;
      line-height: .88rem;
      background-color: #0063AE;
      font-size: .34rem;
      text-align: center;
      color: #fff;
      border-radius: .1rem;
      margin-bottom: .46rem;
    }
  }
  .organization-edit {
    font-size: .34rem;
    height: 100%;
    background-color: #f4f4f4;
    .p40 {
      padding: .4rem .3rem 0 .3rem;
    }
    .vux-x-input input {
      text-align: right;
    }

    .fixed-section-modal {
      position: fixed;
      background: #fff;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 3;
      overflow-y: scroll;
      height: 9rem;
      div {
        font-size: .32rem;
        margin-bottom: .3rem;
      }
      .section-list {
        margin-bottom: .88rem;
        li {
          padding: .17rem .24rem;
          border: 1px solid #e1e1e1;
          border-radius: .06rem;
          background-color: #fff;
          color: #666;
          font-size: .26rem;
          margin-right: .2rem;
          margin-bottom: .2rem;
        }
        .active {
          border: 2px solid #0060A9;
          color: #0060A9;
        }
      }
      p {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        height: .88rem;
        line-height: .88rem;
        text-align: center;
        background-color: #0063AE;
        color: #fff;
        font-size: .32rem;
      }
    }
    .take-photo-section {
      margin-top: .2rem;
      background: #fff;
      .item-section {
        &:last-child {
          padding-bottom: .6rem;
        }
        .title {
          font-size: .32rem;
          margin-bottom: .3rem;
          color: #111;
        }
        div {
          height: 4.8rem;
          text-align: center;
          background-color: #F4F4F4;
          img {
            width: 4.79rem;
            height: 3.51rem;
            margin-top: .675rem;
            vertical-align: middle;
            &.cert3{
              width: 6.07rem;
              height: 4rem;
              margin-top: .475rem;
            }
          }
        }

        .btns {
          height: .88rem;
          line-height: .88rem;
          border: 1px solid #999;
          text-align: center;
          border-radius: .1rem;
          margin-top: .27rem;
          img {
            width: .37rem;
            height: .31rem;
            vertical-align: middle;
            margin-right: .21rem;
          }
          span {
            font-size: .34rem;
            color: #0063AE;

          }
        }

      }
    }

    .btn-check {
      width: 6.9rem;
      margin-left: .3rem;
      height: .88rem;
      line-height: .88rem;
      background-color: #0063AE;
      font-size: .34rem;
      text-align: center;
      color: #fff;
      border-radius: .1rem;
      margin-bottom: .46rem;
    }
  }
    .btn-wrap{
      background-color: #fff;
      padding-bottom: .57rem;
      .btn-back{
        width: 6.9rem;
        margin-left: .3rem;
        height: .88rem;
        line-height: .88rem;
        background-color: #fff;
        font-size: .34rem;
        text-align: center;
        color: #0063AE;
        border: 1px solid #999;
        border-radius: .1rem;
        margin-bottom: .46rem;
      }
    }
</style>
